<template>
  <a-card>
    <h2>品牌会员卡样式</h2>
    <a-form-model ref="form" :model="form" :rules="rules" :labelCol="{ span: 7 }" :wrapperCol="{ span: 16 }">
      <h3>品牌会员背景图</h3>
      <a-row>
        <a-col :lg="8" :md="12" :sm="24">
          <a-form-model-item label="银卡" prop="silverImg">
            <JImageUpload :uploadParams="getUploadParams()" :isMultiple="false" :accept="'image/*'" :fileSize="1" @fileChange="e => fileChange(e, 'silverImg')" v-model="silverImg"></JImageUpload>
            <div class="tip" v-show="tips.silverImg">请上传图片！</div>
            <p>* 建议卡面尺寸270x210px，大小不超过1M</p>
          </a-form-model-item>
        </a-col>
        <a-col :lg="8" :md="12" :sm="24">
          <a-form-model-item label="金卡" prop="goldImg">
            <JImageUpload :uploadParams="getUploadParams()" :isMultiple="false" :accept="'image/*'" :fileSize="1" @fileChange="e => fileChange(e, 'goldImg')" v-model="goldImg"></JImageUpload>
            <div class="tip" v-show="tips.goldImg">请上传图片！</div>
            <p>* 建议卡面尺寸270x210px，大小不超过1M</p>
          </a-form-model-item>
        </a-col>
        <a-col :lg="8" :md="12" :sm="24">
          <a-form-model-item label="历史白金卡/铂金卡" prop="whiteGoldImg">
            <JImageUpload
              :uploadParams="getUploadParams()"
              :isMultiple="false"
              :accept="'image/*'"
              :fileSize="1"
              @fileChange="e => fileChange(e, 'whiteGoldImg')"
              v-model="whiteGoldImg"
            ></JImageUpload>
            <p>* 建议卡面尺寸270x210px，大小不超过1M</p>
            <div class="tip" v-show="tips.whiteGoldImg">请上传图片！</div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-divider></a-divider>
      <h3>生日月样式</h3>
      <a-row>
        <a-col :lg="8" :md="12" :sm="24">
          <a-form-model-item label="会员生日背景">
            <JImageUpload :uploadParams="getUploadParams()" :isMultiple="false" :accept="'image/*'" :fileSize="1" @fileChange="e => fileChange(e, 'birthdayImg')" v-model="birthdayImg"></JImageUpload>
            <p>* 建议尺寸270x210px，支持jpg/png/gif，大小不超过1M</p>
            <div class="tip" v-show="tips.birthdayImg">请上传图片！</div>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-button type="primary" @click="handleSubmit" style="margin: 16px auto; display: block">保存</a-button>
  </a-card>
</template>
<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import globalData from '@/assets/js/common'
import { queryCardBg, saveCardBg } from '@/api/marketingCenter/memberTask'
export default {
  components: {
    JImageUpload
  },
  data() {
    return {
      form: {
        silverImg: null,
        goldImg: null,
        whiteGoldImg: null,
        birthdayImg: null
      },
      tips: [],
      silverImg: [],
      goldImg: [],
      whiteGoldImg: [],
      birthdayImg: [],
      rules: {
        silverImg: [{ required: true, trigger: ['blur', 'change'], validator: this.validatorImg, type: 'array' }],
        goldImg: [{ required: true, trigger: ['blur', 'change'], validator: this.validatorImg, type: 'array' }],
        whiteGoldImg: [{ required: true, trigger: ['blur', 'change'], validator: this.validatorImg, type: 'array' }]
      },
      cardList: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      queryCardBg().then(res => {
        if (res.code == 0) {
          let list = res.data.memberBackGroundList ? res.data.memberBackGroundList : []
          this.cardList = list
          if (list.length > 0) {
            this.birthdayImg = list.filter(e => e.type == 0)[0].img ? [list.filter(e => e.type == 0)[0].img] : []
            this.silverImg = list.filter(e => e.type == 1)[0].img ? [list.filter(e => e.type == 1)[0].img] : []
            this.goldImg = list.filter(e => e.type == 2)[0].img ? [list.filter(e => e.type == 2)[0].img] : []
            this.whiteGoldImg = list.filter(e => e.type == 3)[0].img ? [list.filter(e => e.type == 3)[0].img] : []
          }
        }
      })
    },
    validatorImg(rule, value, callback) {
      if (rule.field == 'silverImg') {
        if (this.form.silverImg.length > 0) {
          callback()
        } else {
          callback('请上传银卡背景图')
        }
      } else if (rule.field == 'goldImg') {
        if (this.form.goldImg.length > 0) {
          callback()
        } else {
          callback('请上传金卡背景图')
        }
      } else if (rule.field == 'whiteGoldImg') {
        if (this.form.whiteGoldImg.length > 0) {
          callback()
        } else {
          callback('请上传白金卡背景图')
        }
      }
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileChange(list, type) {
      switch (type) {
        case 'silverImg':
          this.form.silverImg = list
          break
        case 'goldImg':
          this.form.goldImg = list
          break
        case 'whiteGoldImg':
          this.form.whiteGoldImg = list
          break
        case 'birthdayImg':
          this.form.birthdayImg = list
          break
      }
    },
    // 提交
    handleSubmit(e) {
      let self = this
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$confirm({
            title: '确认发布此次会员卡配置?',
            // content: h => <div style="color:red;">Some descriptions</div>,
            onOk() {
              let params = {
                requestData: {
                  memberBackGroundList: [
                    { type: 0, img: self.form.birthdayImg && self.form.birthdayImg.length ? self.form.birthdayImg[0].url : '' },
                    { type: 1, img: self.form.silverImg[0].url },
                    { type: 2, img: self.form.goldImg[0].url },
                    { type: 3, img: self.form.whiteGoldImg[0].url }
                  ]
                }
              }
              saveCardBg(params).then(res => {
                if (res.code == 0) {
                  self.$message.success('保存成功')
                } else {
                  self.$message.warning(res.msg)
                }
              })
            },
            onCancel() {
              console.log('Cancel')
            },
            class: 'test'
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.tip {
  color: #f5222d;
  line-height: 22px;
  margin-top: -8px;
}
</style>

